import { lazy } from 'react';
import { Navigate } from 'react-router-dom'
import Home from '../pages/Home'
import My from '../pages/My'
import Edit from '../pages/Edit'
import Blog from '../pages/Blog'
import NeedAuth from '../components/NeedAuth'

const Login = lazy(()=> import('../pages/Login'))
const Publish = lazy(()=> import('../pages/Publish'))
const About = lazy(()=> import('../pages/Edit/About'))
const ImageList = lazy(()=> import('../pages/Edit/ImageList'))
const Works = lazy(()=> import('../pages/Edit/Works'))
const Register = lazy(()=> import('../pages/Register'))
const PIM = lazy(()=> import('../pages/PIM'))


const router =  [
  {
    path:'/login',
    element: <Login />
  },
  {
    path:'/register',
    element: <Register />
  },
  {
    path:'/home',
    element: <Home />
  },
  {
    path:'/my',
    element: <NeedAuth><My /></NeedAuth>
  },
  {
    path:'/pim',
    element: <NeedAuth><PIM /></NeedAuth>
  },
  {
    path:'/edit',
    element: <NeedAuth><Edit /></NeedAuth>
  },
  {
    path:'/blog',
    element: <NeedAuth><Blog /></NeedAuth>
  },
  {
    path:'/publish',
    element: <NeedAuth><Publish /></NeedAuth>
  },
  {
    path:'/about',
    element: <NeedAuth><About /></NeedAuth>
  },
  {
    path:'/image',
    element: <NeedAuth><ImageList /></NeedAuth>
  },
  {
    path:'/works',
    element: <NeedAuth><Works /></NeedAuth>
  },
  
  {
    path:'/',
    element: <Navigate replace to="/home"/>
  },
  
]

export default router